<template>
  <div class="tw-top-bg">
    <div class="tw-container" :class="{'tw-container--non-scroll': nonScroll}">
      <tw-header
        label="嘉兴市智慧教育"></tw-header>
      <div class="tw-main">
        <div class="screen">
          <el-row class="tw-grid">
            <el-row :span="24" class="tw-grid__single">
              <tw-card
                label="注册学校增长趋势分析(近三个月)"
              >
                <div class="tw-box">
                  <tw-table
                    :tableData="tableData"
                    :maxItem="9"
                    weekTh
                    hasTotal></tw-table>
                </div>
                <div class="tw-box f-mt2v">
                  <el-row class="tw-grid">
                    <el-col :md="24" :lg="12" class="tw-grid__left">
                      <el-row>
                        <el-col :span="12">
                          <tw-echarts
                            id="echarts_schoolRegionDistributionRate"
                            ref="echarts_schoolRegionDistributionRate"
                            :additionalOptions="additionalOptions['echarts_schoolRegionDistributionRate']"
                            height="44vh"
                          ></tw-echarts>
                        </el-col>
                        <el-col :span="12">
                          <tw-echarts
                            id="echarts_schoolRegionGrowthSituation"
                            ref="echarts_schoolRegionGrowthSituation"
                            :additionalOptions="additionalOptions['echarts_schoolRegionGrowthSituation']"
                            height="44vh"
                          ></tw-echarts>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :md="24" :lg="12" class="tw-grid__right">
                      <tw-echarts
                        id="echarts_registerSchoolLine"
                        ref="echarts_registerSchoolLine"
                        :additionalOptions="additionalOptions['echarts_registerSchoolLine']"
                        height="44vh"
                      ></tw-echarts>
                    </el-col>
                  </el-row>
                </div>
              </tw-card>
            </el-row>
          </el-row>
        </div>
      </div>
      <tw-footer back></tw-footer>
    </div>
  </div>
</template>

<script scoped>
import TwHeader from '@/components/TwHeader.vue'
import TwFooter from '@/components/TwFooter.vue'
import TwEcharts from '@/components/TwEcharts.vue'
import TwCard from '@/components/TwCard.vue'
import TwTable from '@/components/TwTable.vue'

export default{
  beforeMount () {
    let windowWidth = window.screen.width
    if (windowWidth === 1024) {
      this.nonScroll = false
    }
  },
  created () {
    // echarts_schoolRegionDistributionRate 学校数量区域分布
    this.$axios.get('/static/weishidataview/jsondata/echarts_schoolRegionDistributionRate.json').then(response => {
      this.additionalOptions.echarts_schoolRegionDistributionRate = response.data
    }, response => {
      console.log('error')
    })
    // echarts_schoolRegionGrowthSituation 学校增长情况
    this.$axios.get('/static/weishidataview/jsondata/echarts_schoolRegionGrowthSituation.json').then(response => {
      this.additionalOptions.echarts_schoolRegionGrowthSituation = response.data
    }, response => {
      console.log('error')
    })
    // echarts_registerSchoolLine 注册学校数线图
    this.$axios.get('/static/weishidataview/jsondata/echarts_registerSchoolLine.json').then(response => {
      this.additionalOptions.echarts_registerSchoolLine = response.data
    }, response => {
      console.log('error')
    })
  },
  mounted () {
    // 绑定echarts的resize方法
    window.onresize = () => {
      this.$refs['echarts_schoolRegionDistributionRate'].resizeChart()
      this.$refs['echarts_schoolRegionGrowthSituation'].resizeChart()
      this.$refs['echarts_registerSchoolLine'].resizeChart()
    }
  },
  props: [],
  data () {
    return {
      nonScroll: true,
      additionalOptions: {
        echarts_schoolRegionDistributionRate: {},
        echarts_schoolRegionGrowthSituation: {},
        echarts_registerSchoolLine: {}
      },
      tableData: {
        thead: ['区域', '学校总数', `10月,第一周`, '10月,第2周', '10月,第3周', '10月,第4周', '10月,第5周',
          '11月,第1周', '11月,第2周', '11月,第3周', '11月,第4周', '11月,第5周', '12月,第1周', '12月,第2周',
          '12月,第3周', '12月,第4周', '12月,第5周' ],
        tbody: [
          ['华北区', '300', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3'],
          ['华东区', '300', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3'],
          ['华南区', '300', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3'],
          ['华中区', '300', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3'],
          ['西北区', '300', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3'],
          ['西南区', '300', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3'],
          ['东北区', '300', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3'],
          ['汇总', '300', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3', '3']
        ]
      }
    }
  },
  components: {
    TwHeader,
    TwFooter,
    TwEcharts,
    TwCard,
    TwTable
  }
}
</script>

<style scoped></style>
